<template>
  <div class="home">
        <div class="home-top">
           <i class="iconfont icon-wode"></i>
           <span>首页</span>
        </div>

        <div class="swiper">
                  <Swipe/>
        </div>
        <div class="box">

        </div>
        <div class="vidio-t">
            <i class="iconfont icon-gouwucheman"></i>
            <span>推荐视频</span>
        </div>
        <div class="viedo">
            <video src="@/assets/images/myvideo.mp4"
              width="100%"
              controls
              autoplay
              loop
              muted
            ></video>
        </div>
  </div>
</template>

<script>
import Swipe from "@/components/Swiper.vue"
export default {
  components: {
    Swipe,
  }
}
</script>

<style lang="less">

    .home-top{
      width: 100%;
      height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      i{
          font-size: 3rem;
          position: absolute;
          top: 0;
          left: 0;
      }
      span{
        font-size: 1.6rem;
      }
    }
    .swiper{
      width: 100%;
      margin-top:-8rem ;
    }
    .box{
      margin-top: 10rem;
    }
    .vidio-t{
      width: 100%;
     height: 4rem; 
     display: flex;
     flex-direction: start;
     align-items: center;
      background-color: #fff;

      i{
        font-size: 2rem;
      }
      span{
        margin-left: 1rem;
        display: block;
        font-size: 1.4rem;
        color: #666;
      }
    }
    .viedo{
        border: 1px solid #ccc;
    }

</style>
